<template>
	<main>
		<header>
			<div class="location"><a @click="back"><i class="iconfont icon-zuojiantou"></i></a></div>
			<div class="header-search">
				<p>{{changeTitle}}</p>
			</div>
			<div class="my"><a href=""><span>导航 <i class="iconfont icon-daohang"></i></span></a></div>
		</header>
	</main>
</template>
<script>
	export default{
		name:"header2",
		data(){
			return{

			}
		},
		methods:{
			back(){
				this.$router.go(-1);
			}
		},
		computed:{
			changeTitle(){
				return this.$store.state.title;
			}
		}
	}
</script>

<style scoped>
	header{
		width: 100%;
		height: 1rem;
		height: 50px;
		box-sizing: border-box;
		display: flex;
	    color: #fff;
	    background: #06c1ae;
	    border-bottom: 1px solid #21897d;
		
	}
	header .header-search{
		flex-grow: 1;
		height: 100%;
		text-align: center;
		display: flex;
		position:relative;
	}
	header .header-search p{
	 	margin: 0 auto;
	    font-size: .4rem;
	    line-height: 1rem;
	}
	.location,.my{
		width: 80px;
		display: inline-block;
		font-size: .32rem;
		text-align: center;
		line-height: 1rem;

	}
	.location a,.my a{
	    display: block;
	    height: 100%;
	    color: white;
	}
</style>